<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简易SPA示例</title>
  <style>
    body {
      margin: 0;
      display: flex;
      height: 100vh;
      font-family: sans-serif;
    }
    .sidebar {
      width: 200px;
      background: #2c3e50;
      color: white;
      padding: 1rem;
      box-sizing: border-box;
    }
    .sidebar button {
      display: block;
      width: 100%;
      margin: 0.5rem 0;
      padding: 0.5rem;
      background: #34495e;
      border: none;
      color: white;
      cursor: pointer;
    }
    .sidebar button:hover {
      background: #1abc9c;
    }
    .main {
      flex: 1;
      border: none;
    }
  </style>
</head>
<body>

  <div class="sidebar">
    <button onclick="navigate('google')">Google</button>
    <button onclick="navigate('youtube')">YouTube</button>
    <button onclick="navigate('github')">GitHub</button>
  </div>

  <iframe id="mainFrame" class="main"></iframe>

  <script>
    const routes = {
      google: 'http://127.0.0.1:5500/src/01htmlcss/04css%E8%BF%9B%E9%98%B6/11%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87.html',
      youtube: 'http://127.0.0.1:5500/src/01htmlcss/04css%E8%BF%9B%E9%98%B6/11%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87.html',
      github: 'https://www.github.com',
    };

    function navigate(site) {
      if (routes[site]) {
        history.pushState({ site }, '', `#${site}`);
        loadContent(site);
      }
    }

    function loadContent(site) {
      const iframe = document.getElementById('mainFrame');
      iframe.src = routes[site] || '';
    }

    window.addEventListener('popstate', (event) => {
      const site = location.hash.replace('#', '');
      loadContent(site);
    });

    // 页面首次加载时检查 URL
    window.addEventListener('load', () => {
      const site = location.hash.replace('#', '');
      if (routes[site]) {
        loadContent(site);
      }
    });
  </script>
</body>
</html>
